<template>
  <div class="mrials-container">
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" label-width="90px" class="search-form">
        <el-form-item label="物料编码">
          <el-input v-model="searchForm.mrialsCode" placeholder="请输入物料编码" clearable style="width: 220px" />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="searchForm.mrialsName" placeholder="请输入物料名称" clearable style="width: 220px" />
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchForm.mrialsDept" clearable placeholder="请选择部门" style="width: 220px">
            <el-option v-for="d in deptOptions" :key="d.value" :label="d.label" :value="d.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="onSearch">查询</el-button>
          <el-button :icon="Refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <template #header>
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <span style="font-weight:bold;">物料列表</span>
          <div>
            <el-button type="primary" size="small" @click="onAdd">新增</el-button>
          </div>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        size="default"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="#" width="60" align="center" />
        <el-table-column prop="mrialsCode" label="物料编码" min-width="150" show-overflow-tooltip align="center" />
        <el-table-column prop="mrialsName" label="物料名称" min-width="160" show-overflow-tooltip align="center" />
        <el-table-column prop="departmentName" label="部门" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="mrialsTime" label="时间" min-width="160" show-overflow-tooltip align="center" />
        <el-table-column prop="userTrueName" label="入库人" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="mrialsNote" label="备注" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" link @click="openProductDialog(scope.row)">产品管理</el-button>
            <el-button size="small" link @click="onEdit(scope.row)">编辑</el-button>
            <el-button size="small" link type="danger" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="onSizeChange"
          @current-change="onPageChange"
        />
      </div>
    </el-card>
  </div>
  <!-- Add/Edit Dialog -->
  <el-dialog v-model="dialog.visible" :title="dialog.isEdit ? '编辑物料' : '新增物料'" width="600px" :close-on-click-modal="false">
    <el-form ref="formRef" :model="formData" label-width="120px">
      <el-form-item label="物料编码">
        <el-input v-model="formData.mrialsCode" placeholder="请输入物料编码" />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="formData.mrialsName" placeholder="请输入物料名称" />
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="formData.mrialsDept" placeholder="请选择部门" clearable style="width:100%">
          <el-option v-for="d in deptOptions" :key="d.value" :label="d.label" :value="d.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="formData.mrialsTime" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss.SSS[Z]" placeholder="选择时间" style="width:100%" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formData.mrialsNote" type="textarea" :rows="3" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="入库人">
        <el-select v-model="formData.mrialsPerson" placeholder="请选择入库人" clearable style="width:100%" filterable>
          <el-option v-for="u in userOptions" :key="u.value" :label="u.label" :value="u.value" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="状态">
        <el-select v-model="formData.state" placeholder="请选择状态" style="width:100%">
          <el-option :value="0" label="未处理" />
          <el-option :value="1" label="已入库" />
          <el-option :value="2" label="已出库" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog.visible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 产品管理弹窗 -->
  <el-dialog v-model="productDialog.visible" title="产品管理" width="70%" align-center :close-on-click-modal="false">
    <div style="display:flex;align-items:center;margin-bottom:8px;gap:10px;justify-content:space-between;">
      <div style="display:flex;align-items:center;gap:10px;">
        <el-button type="primary" size="small" @click="openProductSelect">新增</el-button>
        <div style="font-weight:600;">关联物料</div>
      </div>
      <div style="display:flex;gap:8px;">
        <el-button size="small" @click="selectAllInDialog">全选</el-button>
        <el-button size="small" @click="invertSelectInDialog">反选</el-button>
      </div>
    </div>
    <el-table ref="productDialogTableRef" :data="productDialog.items" border size="small" style="width:100%" @selection-change="onDialogSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" width="60" label="#" align="center" />
      <el-table-column prop="productCode" label="产品编号" width="160" show-overflow-tooltip />
      <el-table-column prop="productName" label="产品名称" width="160" show-overflow-tooltip />
      <el-table-column prop="spec" label="规格型号" width="180" show-overflow-tooltip />
      <el-table-column prop="state" label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag size="small" type="success" v-if="scope.row.state === 1">已入库</el-tag>
          <el-tag size="small" type="info" v-else-if="scope.row.state === 2">已出库</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="单位" width="80" align="center">
        <template #default="scope">{{ scope.row.unit || '件' }}</template>
      </el-table-column>
      <el-table-column label="接收数量" width="140" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.qty" size="small" placeholder="请输入" style="width: 110px" />
        </template>
      </el-table-column>
      <el-table-column label="批次号" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.batchNo" size="small" placeholder="请输入批次号" />
        </template>
      </el-table-column>
      <el-table-column label="仓库" width="160">
        <template #default="scope">
          <el-select v-model="scope.row.warehouse" size="small" placeholder="选择仓库" style="width: 140px" @change="onWarehouseChange(scope.row)">
            <el-option v-for="w in productDialog.warehouses" :key="w.value" :label="w.label" :value="w.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="库区" width="140">
        <template #default="scope">
          <el-select v-model="scope.row.area" size="small" placeholder="选择库区" style="width: 120px" @change="onAreaChange(scope.row)">
            <el-option v-for="a in getAreaOptions(scope.row.warehouse)" :key="a.value" :label="a.label" :value="a.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="库位" width="140">
        <template #default="scope">
          <el-select v-model="scope.row.location" size="small" placeholder="选择库位" style="width: 120px">
            <el-option v-for="l in getLocationOptions(scope.row.warehouse, scope.row.area)" :key="l.value" :label="l.label" :value="l.value" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="productDialog.visible=false">返回</el-button>
        <el-button type="warning" @click="submitProductModels('out')">出库</el-button>
        <el-button type="primary" @click="submitProductModels('in')">入库</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 选择物料弹窗 -->
  <el-dialog v-model="productSelect.visible" title="选择物料" width="70%" align-center :close-on-click-modal="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
      <div>
        <el-button size="small" @click="selectAllProducts">全选本页</el-button>
        <el-button size="small" @click="invertSelectProducts">反选本页</el-button>
        <el-button size="small" @click="clearSelectProducts">清空选择</el-button>
      </div>
      <div>已选择 {{ productSelect.selectedIds.size }} 条</div>
    </div>
    <el-table ref="productSelectTableRef" :data="productSelect.list" border size="small" style="width:100%" :row-key="row => row.materialIds" @selection-change="onProductSelectionChange">
      <el-table-column type="selection" width="50" align="center" reserve-selection />
      <el-table-column type="index" label="#" width="60" align="center" />
      <el-table-column prop="materialCode" label="物料编码" width="150" show-overflow-tooltip />
      <el-table-column label="物料名称" width="160" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mayrtName || scope.row.materialName || scope.row.mrialsName || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="unitName" label="单位" width="100" align="center" />
      <el-table-column prop="specifications" label="规格型号" width="180" show-overflow-tooltip />
      <el-table-column prop="num" label="数量" width="100" align="center" />
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="productSelect.page"
        v-model:page-size="productSelect.size"
        :total="productSelect.total"
        :page-sizes="[10,20,50,100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="(s)=>{productSelect.size=s;loadProductList()}"
        @current-change="(p)=>{productSelect.page=p;loadProductList()}"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="productSelect.visible=false">取消</el-button>
        <el-button type="primary" @click="confirmSelectProducts">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/api/http'

const loading = ref(false)
const tableData = ref([])
const searchForm = reactive({
  mrialsCode: '',
  mrialsName: '',
  mrialsDept: null
})
const pagination = reactive({ page: 1, size: 10, total: 0 })
const deptOptions = ref([])
const userOptions = ref([])

// dialog & form
const dialog = reactive({ visible: false, isEdit: false })
const formRef = ref(null)
const formData = reactive({
  mrialsId: 0,
  mrialsCode: '',
  mrialsName: '',
  mrialsDept: null,
  mrialsTime: '',
  mrialsNote: '',
  mrialsPerson: null,
  productCode: '',
  state: 0
})

const loadData = async () => {
  loading.value = true
  try {
    const res = await http.get('api/WMS/GetMrialsDetailPage', {
      pageIndex: pagination.page,
      pageSize: pagination.size,
      mrialsCode: searchForm.mrialsCode || '',
      mrialsName: searchForm.mrialsName || '',
      mrialsDept: searchForm.mrialsDept ?? ''
    })
    if (res && res.success) {
      tableData.value = Array.isArray(res.data) ? res.data : []
      pagination.total = res.total ?? tableData.value.length
    } else {
      ElMessage.error(res?.message || '获取数据失败')
    }
  } catch (e) {
    console.error(e)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

const onSearch = () => { pagination.page = 1; loadData() }
const onReset = () => {
  searchForm.mrialsCode = ''
  searchForm.mrialsName = ''
  searchForm.mrialsDept = null
  pagination.page = 1
  loadData()
}
const onSizeChange = (s) => { pagination.size = s; pagination.page = 1; loadData() }
const onPageChange = (p) => { pagination.page = p; loadData() }

onMounted(async () => {
  loadData()
  try {
    const [deptRes, userRes] = await Promise.all([
      http.get('api/WMS/GetAllDepts'),
      http.get('api/WMS/GetAllUsers')
    ])
    if (deptRes && deptRes.success) {
      deptOptions.value = (deptRes.data || []).map(x => ({ value: x.id || x.deptId || x.departmentId, label: x.departmentName || x.deptName || x.name }))
    }
    if (userRes && userRes.success) {
      userOptions.value = (userRes.data || []).map(x => ({ value: x.userId || x.id, label: x.userTrueName || x.userName || x.name }))
    }
  } catch (e) { /* ignore */ }
})

// CRUD
const onAdd = () => {
  dialog.isEdit = false
  dialog.visible = true
  Object.assign(formData, { mrialsId: 0, mrialsCode: '', mrialsName: '', mrialsDept: null, mrialsTime: '', mrialsNote: '', mrialsPerson: null, productCode: '', state: 0 })
}
const onEdit = async (row) => {
  dialog.isEdit = true
  dialog.visible = true
  try {
    const res = await http.get('api/WMS/GetMrialsById', { id: row.mrialsId })
    if (res && res.success && res.data) {
      Object.assign(formData, {
        mrialsId: res.data.mrialsId,
        mrialsCode: res.data.mrialsCode,
        mrialsName: res.data.mrialsName,
        mrialsDept: (res.data.mrialsDept ?? null),
        mrialsTime: res.data.mrialsTime ? new Date(res.data.mrialsTime).toISOString() : '',
        mrialsNote: res.data.mrialsNote,
        mrialsPerson: (res.data.mrialsPerson ?? null),
        productCode: res.data.productCode || '',
        state: res.data.state ?? 0
      })
    } else {
      ElMessage.error(res?.message || '获取详情失败')
    }
  } catch (e) { ElMessage.error('获取详情失败') }
}
const onSubmit = async () => {
  const payload = {
    mrialsId: dialog.isEdit ? formData.mrialsId : 0,
    mrialsCode: formData.mrialsCode,
    mrialsName: formData.mrialsName,
    mrialsDept: formData.mrialsDept,
    mrialsTime: formData.mrialsTime ? new Date(formData.mrialsTime).toISOString() : '',
    mrialsNote: formData.mrialsNote,
    mrialsPerson: formData.mrialsPerson,
    productCode: formData.productCode || '',
    state: formData.state ?? 0
  }
  try {
    const res = dialog.isEdit
      ? await http.put('api/WMS/MrialsUpdate', payload, '提交中...')
      : await http.post('api/WMS/MrialsAdd', payload, '提交中...')
    if (res && (res.success || res.status)) {
      ElMessage.success('保存成功')
      dialog.visible = false
      loadData()
    } else {
      ElMessage.error(res?.message || '保存失败')
    }
  } catch (e) { ElMessage.error('保存失败') }
}
const onDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该物料吗？', '提示', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' })
  } catch {
    return
  }
  const payload = {
    mrialsId: row.mrialsId,
    mrialsCode: row.mrialsCode,
    mrialsName: row.mrialsName,
    mrialsDept: row.mrialsDept,
    mrialsTime: row.mrialsTime ? new Date(row.mrialsTime).toISOString() : '',
    mrialsNote: row.mrialsNote,
    mrialsPerson: row.mrialsPerson,
    productCode: row.productCode || '',
    state: row.state ?? 0
  }
  try {
    const res = await http.del('api/WMS/MrialsDelete', payload, '删除中...')
    if (res && (res.success || res.status)) {
      ElMessage.success('删除成功')
      loadData()
    } else {
      ElMessage.error(res?.message || '删除失败')
    }
  } catch (e) { ElMessage.error('删除失败') }
}

// 产品管理弹窗数据与方法
const productDialog = reactive({
  visible: false,
  items: [],
  headerId: null,
  warehouses: [],
  areasRaw: [],
  locationsRaw: [],
  materialIds: new Set(),
  selectedItems: []
})
const productSelect = reactive({ visible: false, page: 1, size: 10, total: 0, list: [], selectedIds: new Set() })
const productSelectTableRef = ref(null)
const productDialogTableRef = ref(null)
const openProductDialog = async (row) => {
  productDialog.headerId = row.mrialsId
  productDialog.items = []
  productDialog.materialIds = new Set()
  productDialog.selectedItems = []
  // 加载仓库/库区/库位
  try {
    const [wRes, aRes, lRes] = await Promise.all([
      http.get('api/WarehouseQuery/GetAllWarehouseModelling'),
      http.get('api/WarehouseQuery/GetAllReservoirareaModelling'),
      http.get('api/WarehouseQuery/GetAllStorageLocationModelling')
    ])
    if (wRes && wRes.success) productDialog.warehouses = (wRes.data || []).map(x => ({ value: x.id, label: x.warehouseName }))
    if (aRes && aRes.success) productDialog.areasRaw = aRes.data || []
    if (lRes && lRes.success) productDialog.locationsRaw = lRes.data || []
    // 反填：根据主表的 productCode 调后端批量填充明细
    const codeStr = row.productCode || ''
    const codes = codeStr
      ? codeStr.split(/[,，\s]+/).map(s => s.trim()).filter(s => s)
      : []
    if (codes.length > 0) {
      const fillRes = await http.post('api/WMS/BatchFillProductModelsByCode', codes, false)
      if (fillRes && (fillRes.success || fillRes.status)) {
        const list = Array.isArray(fillRes.data) ? fillRes.data : []
        productDialog.items = list.map(x => ({
          id: x.id || x.productId || 0,
          productCode: x.productCode || x.productNumber || '',
          productName: x.productName || '',
          spec: x.productGui || x.productModel || x.productSpecification || '',
          unit: x.productdan || x.unit || '件',
          qty: x.productNum || x.qty || '',
          batchNo: x.productCores || x.batchNo || '',
          warehouse: x.warehouseId || null,
          area: x.reservoirId || null,
          location: x.storageId || null,
          state: (x.state ?? x.productStatus ?? x.status ?? null)
        }))
      }
    }
  } catch (e) { /* ignore */ }
  // 展示管理框
  productDialog.visible = true
}
const openProductSelect = () => {
  productSelect.visible = true
  productSelect.page = 1
  loadProductList(true)
}
const loadProductList = async (resetSelection=false) => {
  // 使用你提供的接口：/api/WMS/GetMaterialsFromApiPage?pageIndex=&pageSize=
  const res = await http.get('api/WMS/GetMaterialsFromApiPage', { pageIndex: productSelect.page, pageSize: productSelect.size })
  if (res && res.success) {
    productSelect.list = res.data || []
    productSelect.total = res.total || 0
    if (resetSelection && productSelectTableRef.value) {
      productSelectTableRef.value.clearSelection()
      productSelect.selectedIds.clear()
    }
  }
}
const selectAllProducts = () => {
  if (!productSelectTableRef.value) return
  productSelect.list.forEach(row => {
    productSelectTableRef.value.toggleRowSelection(row, true)
    productSelect.selectedIds.add(row.materialIds)
  })
}
const invertSelectProducts = () => {
  if (!productSelectTableRef.value) return
  productSelect.list.forEach(row => {
    const selected = productSelect.selectedIds.has(row.materialIds)
    productSelectTableRef.value.toggleRowSelection(row, !selected)
    if (selected) productSelect.selectedIds.delete(row.materialIds); else productSelect.selectedIds.add(row.materialIds)
  })
}
const clearSelectProducts = () => {
  if (!productSelectTableRef.value) return
  productSelectTableRef.value.clearSelection()
  productSelect.selectedIds.clear()
}
const onProductSelectionChange = (rows) => {
  const ids = new Set(rows.map(r => r.materialIds))
  productSelect.selectedIds = ids
}
const confirmSelectProducts = () => {
  const selectedRows = productSelect.list.filter(x => productSelect.selectedIds.has(x.materialIds))
  selectedRows.forEach(x => {
    productDialog.items.push({
      productCode: x.materialCode,
      productName: x.mayrtName || x.materialName || x.mrialsName || '',
      spec: x.specifications || '',
      unit: x.unitName || '',
      qty: '',
      batchNo: '',
      warehouse: null,
      area: null,
      location: null,
      state: null
    })
    productDialog.materialIds.add(x.materialIds)
  })
  productSelect.visible = false
}

// 联动与选项构造
const onWarehouseChange = (row) => { row.area = null; row.location = null }
const onAreaChange = (row) => { row.location = null }
const getAreaOptions = (warehouseId) => {
  if (!warehouseId) return []
  return (productDialog.areasRaw || []).filter(a => a.cId === warehouseId).map(a => ({ value: a.id, label: a.reservoirareaName }))
}
const getLocationOptions = (warehouseId, areaId) => {
  if (!warehouseId) return []
  return (productDialog.locationsRaw || []).filter(l => l.cId === warehouseId).map(l => ({ value: l.id, label: l.storagelocationName }))
}

// 对话框选择变化
const onDialogSelectionChange = (rows) => {
  productDialog.selectedItems = rows || []
}

// 全选/反选（第一个框）
const selectAllInDialog = () => {
  if (!productDialogTableRef.value) return
  productDialogTableRef.value.clearSelection()
  ;(productDialog.items || []).forEach(r => productDialogTableRef.value.toggleRowSelection(r, true))
}
const invertSelectInDialog = () => {
  if (!productDialogTableRef.value) return
  ;(productDialog.items || []).forEach(r => {
    const selected = (productDialog.selectedItems || []).includes(r)
    productDialogTableRef.value.toggleRowSelection(r, !selected)
  })
}

// 提交产品明细：/api/WMS/BatchAddProductModelss
const submitProductModels = async (direction = 'in') => {
  if (!productDialog.headerId) {
    ElMessage.error('未获取到主表Id')
    return
  }
  try {
    if (direction === 'out') {
      // 出库：必须选中数据，发送所选行主键ID数组
      const sel = (productDialog.selectedItems && productDialog.selectedItems.length > 0)
        ? productDialog.selectedItems
        : []
      if (sel.length === 0) {
        ElMessage.warning('请先选择需要出库的行')
        return
      }
      const ids = Array.from(new Set(sel
        .map(x => (x.id ?? x.productId))
        .filter(v => v !== undefined && v !== null && v !== 0)))
        .map(v => v.toString())
      if (ids.length === 0) {
        ElMessage.error('选中行缺少主键Id')
        return
      }
      const url = `api/WMS/BatchUpdateProductStateToOut?mrialsId=${encodeURIComponent(productDialog.headerId)}`
      const res = await http.post(url, ids, '提交中...')
      if (res && (res.success || res.status)) {
        ElMessage({ type: 'success', message: '出库成功', showClose: true })
        productDialog.visible = false
      } else {
        ElMessage.error((res && res.message) || '出库失败')
      }
      return
    }

    // 入库：提交选中或全部为明细
    const rowsToSubmit = (productDialog.selectedItems && productDialog.selectedItems.length > 0)
      ? productDialog.selectedItems
      : productDialog.items
    const productModels = (rowsToSubmit || []).map(x => ({
      productId: 0,
      productCode: x.productCode || '',
      productName: x.productName || '',
      productGui: x.spec || '',
      productdan: x.unit || '件',
      productNum: Number(x.qty || 0),
      productCores: x.batchNo || '',
      warehouseId: x.warehouse || 0,
      reservoirId: x.area || 0,
      storageId: x.location || 0
    }))
    const body = {
      productModels,
      materialIds: Array.from(productDialog.materialIds || []),
      mrialsId: productDialog.headerId
    }
    const res = await http.post('api/WMS/BatchAddProductModelss', body, '提交中...')
    if (res && (res.success || res.status)) {
      ElMessage.success('添加成功')
      productDialog.visible = false
    } else {
      ElMessage.error(res?.message || '添加失败')
    }
  } catch (e) {
    ElMessage.error(direction === 'out' ? '出库失败' : '添加失败')
  }
}
</script>

<style lang="less" scoped>
.mrials-container { padding: 20px; }
.search-card { margin-bottom: 16px; }
.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
:deep(.el-table__row) { height: 48px; }
:deep(.el-table .cell) { 
  line-height: 48px; 
  padding: 8px 16px; 
  font-size: 14px;
  font-weight: 500;
}
:deep(.el-table__header-wrapper .cell) {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}
</style>


